html{
    overflow:hidden;
  }
  body {
    font-family: "Helvetica","Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
    margin:0px;
    -webkit-user-select: none;
    color:#404040;
    overflow:hidden;
  }
  a{
      color:#106eb1;
      text-decoration:none;
  }
  
  input[type="checkbox"]{
      appearance: none;
      margin: 0px;
      font: inherit;
      color: currentColor;
      width: 20px;
      height: 20px;
      border: 0.15em solid black;
      border-radius: 5px;
      transform: translateY(-0.075em);
      display: inline-grid;
      place-content: center;
  }
  input[type="checkbox"]:hover::before{
    opacity:0.4;
  }
  input[type="checkbox"]::before {
      content: "";
      width: 0.75em;
      height: 0.75em;
      opacity:0;
      box-shadow: inset 1em 1em black;
      transform-origin: bottom left;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }
  input[type="checkbox"]:checked{
      background-color: black;
  }
  input[type="checkbox"]:checked::before {
      opacity:1;
      box-shadow: inset 1em 1em #fff;
  }
  #prefsDiv input[type="checkbox"]{
      margin: 5px;
      margin-left: 0px;
      margin-right: 6px;
  }
  #container {
      width: 500px;
      height:600px;
      float: left;
      display: flex;
      flex-direction: column;
      justify-content: start;
  }
  #container.bigger{
      width:800px;
  }
  #imgsContainer{
      float:left;
      width:100%;
      overflow-x: hidden;
      overflow-y: auto;
      padding-top:8px;
      background-color:#f5f8fe;
      box-sizing: border-box;
      flex-grow: 2;
      height:100%;
      position:relative;
  }
  .imgContainer, .advContainer{
      float:left;
      display:none;
      width: calc(100% - 21px);
      -webkit-box-pack: center;
      -webkit-box-align: center;
      overflow:hidden;
      float:left;
      position:relative;
      margin:0px 0px 11px 11px;
      box-shadow: 0px 1px 5px rgb(187 187 187 / 30%);
      padding:45px 0px 30px 0px;
      background-color: #fff;
      border-radius: 16px;
      border:3px solid transparent;
      box-sizing: border-box;
  }
  .imgContainer img{
      max-width:100%;
      max-height:400px;
  }
  .bigger .imgContainer img{
      max-height:800px;
  }
  .twocols .imgContainer{
      width:calc(50% - 16px);
      height:170px;
  }
  .twocols .imgContainer img{
      max-height:100%;
  }
  .bigger.twocols .imgContainer{
      height:300px;
  }
  .new{
      display: inline-block;
      position: absolute;
      font-size: 8px;
      background: red;
      padding: 1px 3px;
      color: #fff;
      border-radius: 100px;
      z-index: 1000;
      right: -10px;
  }
  .newshown1 .new{
      display:none;
  }
  .origImg{
      background-image: linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef),                                                                    linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
      background-size:26px 26px;
      background-position:0 0, 13px 13px;
      margin:1px 1px 11px 0px;
      background-color: #fff;
  }
  .imgInput{
      position:absolute;
      bottom:0px;
      left:0px;
      width:100%;
      box-sizing:border-box;
      color:#6b6969;
      border:0px;
      padding:2px 5px;
  }
  .noSelect {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  .noSelect:focus {
      outline: none !important;
  }
  .filterInput{
      -moz-appearance: textfield;
      width: 38px;
      border: 1px solid gray;
      background: #222;
      border-radius: 5px;
      color: #fff;
      margin:0px 2px;
  }
  .filterInput::-webkit-outer-spin-button,
  .filterInput::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }

  .imgInfo{
      position: absolute;
      padding: 12px;
      width:100%;
      box-sizing:border-box;
      top: 0px;
      left: 0px;
  }
  .imgSize{
      float:right;
      background: rgba(0,0,0,0.75);
      padding: 4px 6px;
      border-radius: 3px;
      font-size: 12px;
      color: #c6c5c5;
      margin-top:-2px;
  }
  .downloadButton{
      cursor:pointer;
      white-space:nowrap;
      float: left; 
      border-radius: 5px;
      padding: 7px 16px 7px 35px;
      background-color:#404040;
      color:#fff;
      border:2px solid #404040;
  }
  .downloadButton.cancelButton{
      background:none;
      color:#404040;
      border:2px solid #404040;
  }
  .statusdivcontainer .toolsButton{
      padding-left: 16px;
      visibility: visible;
      float: right;
      margin-right: 10px;
      border-radius: 0px;
      border-color:#7a7e83;
      background: transparent;
      color:inherit;
      box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 10%)
  }
  .toolsButton:hover{
      border-color:#7a7e83 !important;
  }
  .statusdivcontainer .toolsButton.inactive{
      background: none;
      border-color: transparent;
      box-shadow:none;
  }
  .downloadButton img{
      transition: transform .4s ease-in-out;
      position:absolute;
      left:21px;
      width:16px;
  }
  .downloadButton:hover img{
      transform:rotate(360deg);
  }
  .zoomIcon{
      padding:0px 5px;
      opacity:0;
      height:20px;
      position:relative;
      top:-1px;
      left:-4px;
      cursor:pointer;
  }
  .imgContainer:hover .zoomIcon, .imgContainer:hover .imgActions{
      opacity:0.9;
  }
  .twocols .imgContainer:hover .imgSize{
      opacity:0.3;
  }
  .bigger.twocols .imgContainer:hover .imgSize{
      opacity:1;
  }
  /*loading*/
  .spinner {
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      width: 70px;
      text-align: center;
      position:relative;
      display:none;
  }

  .spinner > div {
    width: 18px;
    height: 18px;
    margin-left:5px;
    background-color:#404040;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }

  .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }

  @-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
  }

  @keyframes bouncedelay {
    0%, 80%, 100% { 
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 40% { 
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
  }
  .disableBackround{
      position:fixed;
      width:100%;
      height:100%;
      background-color:rgba(0,0,0,0.8);
      z-index:1000;
  }
  progress{
      height:4px;
  }
  progress, .progressText {
      position:absolute;
      top:50%;
      left:50%;
      top:50%;
      width:50%;
      transform:translate(-50%,-50%);
      color:#e8eaed;
  }
  .progressText {
    margin-top: -22px;
}
  /*loading end*/
  /*patches*/
  .ui-widget-header {
      background: #fff !important;
  }
  .ui-slider .ui-slider-handle{
      background: #fff !important;
      width:22px;
      height:22px;
      border-radius:50%;
      top: -12px;
      outline: none;
      transition: background .3s ease-in-out;
  }
  .ui-slider .ui-slider-handle:focus {
      border-color: #007eff;
  }
  .ui-slider-horizontal{
      height:1px;
      margin: 5px 0px;
  }
  .ui-widget.ui-widget-content{
      border:none;
      background: rgba(255,255,255,0.3)
  }
  .showPrefs #prefsDiv{
      display:block !important;
  }
  .prefsTip{
      font-size: 12px;
      padding: 6px 5px;
      display: block;
      background: #e4e4e4;
      box-sizing: border-box;
      margin-top: 8px;
      border-radius: 6px;
      text-align: center;
  }
  .showRating #ratingDiv{
      display:block !important;
  }
  .ui-slider .ui-slider-range{
      box-sizing: border-box;
  }
  .filters{
      float:left;
      padding-top:5px;
  }
  .filters > div{
      float:left;
      bborder:1px solid lightGray;
      padding:7px 23px 7px 10px;
      margin-right:10px;
      margin-left:-10px;
      font-size: 14px;
      bborder-radius: 100px;
      transition: background-color 0.3s ease-out;
      cursor: pointer;
      position: relative;
  }
  .filters .menuLabel{
      opacity:0.9;
  }
  .filters .selectMenu >div:hover{
      background-color: rgba(0, 0, 0, 0.04);
  }
  .filters > div:hover{
      opacity:1;
      color:#609beb;
  }
  /*.filters > div:focus .selectMenu{
      display:block;
  }*/
  .filters svg {
      height: 18px;
      position: absolute;
      margin-top: -1px;
      opacity:0.8;
  }
  .filters .selectMenu{
      display:none;
      position: absolute;
      z-index: 10000;
      background: #fff;
      border: 1px solid lightgray;
      box-shadow: 0.05em 4px 0.6em rgb(0 0 0 / 20%);
      border-radius: 5px;
      margin-top: 10px;
      left: 0px;
      width: max-content;
      max-height: 400px;
      overflow: auto;
      color: initial;
  }
  .filters .selectMenu > div{
      padding: 10px 10px 10px 30px;
  }
  .filters .selectMenu > div.selected{
      background-image: url("check.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: 8px;
  }
  .filters .changedMenu{
      font-weight:bold;
      color:#609beb;
      opacity:0.9;
  }
  .imgDimension{
      ddisplay:none;
  }
  .excluded{
      display:none !important;
  }
  .imgActions{
      position: absolute;
      background: rgba(255,255,255,0.9);
      opacity:0;
  }
  .imgContainer:hover {
      opacity:1;
  }
  .imgActions input[type="checkbox"]{
      top: -3px;
      position: relative;
      margin-right: 12px;
      border-radius: 4px;
      height: 19px;
      width: 19px;
      opacity:0.8;
  }
  .statusdivcontainer{
      padding: 0px 12px;
      background-color: #f5f8fe;
      width: 100%;
      margin-right: 31px;
      box-sizing: border-box;
      bborder-bottom:1px solid #c5c5c5;
      bbox-shadow: 0px 0px 5px rgb(187 187 187 / 80%);
      z-index: 1;
  }
  .statusdivcontainer .downloadButton{
      padding-top:5px;
      padding-bottom:5px;
      margin-top:3px;
      margin-bottom:1px;
      font-size:14px;
  }
  .imgSelected{
      border:3px solid #404040;
  }
  .imgSelected .imgActions{
      opacity:1;
  }
  .clearFilters{
      padding-right:10px;
      margin-right:0px;
  }
  .savesize{
      border-top:1px solid lightGray;
  }
  .twoColsPref{
      width: 18px;
      float: right;
      padding-right: 0px;
      margin-right: 10px;
      margin-top: 7px;
      margin-left: 2px;
      cursor: pointer;
      opacity:0.9;
  }
  
  .twocols .twoColsPref {
      margin-top: 8px;
  }
  .twoColsPref:hover{
      opacity: 1;
  }
  .twoColsPref div{
      border-radius: 2px;
      width:calc( 100% - 2px );
      height:5px;
      border:1px solid;
      border-color:var(--fc);
      float:left;
      border-bottom-widht: 0px;
      box-shadow: 0 1px 1px -1px black;
  }
  .twoColsPref div:nth-child(2), .twoColsPref div:nth-child(3) {
      margin-left: 0px;
      margin-top: -1px;
  }
  .twoColsPref div:nth-child(2) {
      border-radius: 0px;
  }
  .twoColsPref div:nth-child(3) {
      border-bottom-width: 1px;
  }
  .twoColsPref div:nth-child(4) {
      display: none;
  }
  .twocols .twoColsPref div{
      width:6px;
      height:6px;
  }
  .twocols .twoColsPref div:nth-child(4) {
      display: block;
      margin-left: 2px;
      margin-top: 2px;
  }
  .twocols .twoColsPref div:nth-child(2){
      margin-left: 2px;
      margin-top: 0px;
      border-radius: 2px;
  }
  .twocols .twoColsPref div:nth-child(3){
       margin-top: 2px;
  } 
  
  @media (prefers-color-scheme: dark) {
      :root {
          --bg: #292a2c;
          --darkerbg: #0e0e0e;
          --bgpng: #4a4a4a;
          --fc: #e8eaed;
          
      }
      body{
          color:var(--fc);
      }
      a{
          color:#27a5ff;
      }
      .filters svg{
          filter:invert(0.9);
      }
      .statusdivcontainer{
          background-color: var(--darkerbg);
          border-bottom-color: none;
          box-shadow: none;
      }
      #showPrefs img{
          filter:invert(0.9);
          opacity:0.85;
      }
      #showPrefs:hover img{
          opacity:1;
      }
      .filters .selectMenu{
          background-color: var(--darkerbg);
          border-color: var(--darkerbg);
          box-shadow:0.05em 4px 0.6em rgb(0 0 0 / 40%);
      }
      .filters .selectMenu input{
          background-color: transparent !important;
          color:black;
      }
      .filters .selectMenu > div {
          color:#000 !important;
          filter:invert(0.8);
      }
      #imgsContainer{
          background-color: var(--darkerbg);
      }
      .imgContainer{
          background-color: var(--bg);
          box-shadow: none;
      }
      input[type="checkbox"]{
          filter:invert(0.9);
      }
      .zoomIcon{
          filter:invert(0.9);
      }
      .zoomIcon:hover,input[type="checkbox"]:hover{
          filter:invert(1);
          opacity: 1 !important;
      }
      .imgInput{
          background:var(--bg); 
          color: #ebebeb;
      }
      .imgActions{
          background: var(--bg) 0.9;
      }
      .origImg {
          background-color: var(--bg);
          background-image: linear-gradient(45deg, var(--bgpng) 25%, transparent 25%, transparent 75%, var(--bgpng) 75%, var(--bgpng)), linear-gradient(45deg, var(--bgpng) 25%, transparent 25%, transparent 75%, var(--bgpng) 75%, var(--bgpng));
      }
      #prefsDiv > div, #ratingDiv > div, #manyfiles > div{
          background-color: var(--bg) !important; 
      }
      .downloadButton{
          background-color:#3a3b3e;
          border-color:#bfbfbf;
          color:var(--fc);
      }
      .statusdivcontainer .toolsButton{
          background:#3a3b3e;
          border-color:#7a7e83;;
          color:#d5d4d4;
      }
      .downloadButton:hover{
          border-color:#7a7e83;
      }
      .downloadButton.cancelButton{
          filter:invert(1);
      }
      .prefsTip{
          background-color: var(--darkerbg);
      }
      #savefoldername{
          filter:invert(1);
          border:none;
      }
      .imgSelected{
          border-color: #b6babd;
      }
      .new{
          background-color: #fff;
          color:#000;
      }
  }